<template>
  <div>
    <div class="header">
      <van-nav-bar @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
          返回
        </template>
        <template #title> 修改联系人 </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <van-address-edit
        :area-list="areaList"
        show-delete
        show-set-default
        :address-info="start"
        :area-columns-placeholder="['请选择', '请选择', '请选择']"
        @save="onSave"
        @delete="onDelete"
      />
    </div>
  </div>
</template>

<script>
import { addressUpdate, addressDelete, addressList} from "../../api/massage";
import Vue from "vue";
import { AddressEdit } from "vant";
import { areaList } from "@vant/area-data";
Vue.use(AddressEdit);
export default {
  data() {
    return {
      areaList, //地区列表
      list: null,
      start:{}
    };
  },
  created() {
    console.log(this.$route.params.massagecard);
    // 我想要每个框进来默认都有字
    addressList({ userid: localStorage.getItem("userid") }).then((data) => {//先请求一次列表
      console.log(data.data.data);
      this.list = data.data.data.filter((item) => {//过滤出与所要修改的值id一样的对象
        if (item.addressid == this.$route.params.massagecard) {
          return item;
        }
      });
      console.log(this.list);
      this.start = {//address-info默认初始值
        name: this.list[0].name,
        tel: this.list[0].tel,
      };
    });
  },
  methods: {
    setMassage(AddressInfo) {
      addressUpdate({
        addressid: this.$route.params.massagecard,
        userid: localStorage.getItem("userid"),
        name: AddressInfo.name,
        tel: AddressInfo.tel,
        province: AddressInfo.province,
        city: AddressInfo.city,
        county: AddressInfo.county,
        addressDetaill: AddressInfo.addressDetaill,
        isDefault: AddressInfo.isDefault,
      }).then((data) => {
        console.log(data);
      });
    },
    onSave(AddressInfo) {
      this.setMassage(AddressInfo);
      this.$router.back();
    },
    onDelete() {
      //删除列表
      addressDelete({ addressid: this.$route.params.massagecard }).then(
        (data) => {
          console.log(data);
        }
      );
      this.$router.back();
    },
  },
};
</script>

<style>
</style>